<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My awesome food store</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" href="./css/style.css">
</head>

<body>
    <div class="main-wrapper">
        <div class="nav-background">
            <div class="mobile-logo">
                <img src="./icons/logo.svg" alt="">
            </div>
            <div class="mobile-nav">
                <div class="cart">
                    <div class="flex items-center">
                        <img src="./icons/cart-dark.svg" alt="">
                        <a href="#">0 Items - ($0.00)</a>
                    </div>
                </div>
                <div class="nav-top">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About us</a>
                        </li>
                        <li>
                            <a href="#">Products</a>
                        </li>
                        <li>
                            <a href="#">Blog</a>
                        </li>
                        <li>
                            <a href="#">Shop</a>
                        </li>
                        <li>
                            <a href="#">Services</a>
                        </li>
                        <li>
                            <a href="#">Contact us</a>
                        </li>
                        <li>
                            <a href="#">Log in</a>
                        </li>
                        <li>
                            <a href="#">Register</a>
                        </li>
                    </ul>
                </div>
                <div class="contact flex items-center">
                    <img src="./icons/phone.svg" alt="">
                    <div>
                        <h5>Call us: (+84) 123 456 789</h5>
                        <h6>E-mail : support@freshmeal.com</h6>
                    </div>
                </div>
                <div class="time flex items-center">
                    <img src="./icons/clock.svg" alt="">
                    <div>
                        <h5>Working Hours:</h5>
                        <h6>Mon - Sat (8.00am - 12.00am)</h6>
                    </div>
                </div>
            </div>
        </div>
        <div class="site-content-wrapper">
            <div class="nav-trigger">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="feather feather-bar-chart">
                    <line x1="12" y1="20" x2="12" y2="10" />
                    <line x1="18" y1="20" x2="18" y2="4" />
                    <line x1="6" y1="20" x2="6" y2="16" /></svg>
            </div>
            <div class="site-content">
                <header class="topbar">
                    <div class="container flex justify-between items-center">
                        <div class="icons">
                            <a href="#"><img src="./icons/facebook.svg" alt=""></a>
                            <a href="#"><img src="./icons/twitter.svg" alt=""></a>
                            <a href="#"><img src="./icons/google.svg" alt=""></a>
                            <a href="#"><img src="./icons/instagram.svg" alt=""></a>
                            <a href="#"><img src="./icons/search.svg" alt=""></a>
                        </div>
                        <div class="auth flex items-center">
                            <div>
                                <img src="./icons/user-icon.svg" alt="">
                                <a href="#">Log in</a>
                            </div>
                            <span class="divider">|</span>
                            <div>
                                <img src="./icons/edit.svg" alt="">
                                <a href="#">Register Now</a>
                            </div>
                            <span class="divider">|</span>
                            <div>
                                <img src="./icons/cart.svg" alt="">
                                <a href="#">0 Items - ($0.00)</a>
                            </div>
                        </div>
                    </div>
                </header>

                <nav>
                    <div class="top">
                        <div class="container flex justify-between">
                            <div class="contact flex items-center">
                                <img src="./icons/phone.svg" alt="">
                                <div>
                                    <h5>Call US: (+84) 123 456 789</h5>
                                    <h6>E-mail : support@freshmeal.com</h6>
                                </div>
                            </div>
                            <div class="branding">
                                <img src="./icons/logo.svg" alt="">
                            </div>
                            <div class="time flex items-center">
                                <img src="./icons/clock.svg" alt="">
                                <div>
                                    <h5>Working Hours:</h5>
                                    <h6>Mon - Sat (8.00am - 12.00am)</h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="navbar magic-shadow">
                        <div class="container flex justify-center">
                            <a href="#" class="active">Home</a>
                            <a href="#">About us</a>
                            <a href="#">Products</a>
                            <a href="#">Blog</a>
                            <a href="#">Shop</a>
                            <a href="#">Services</a>
                            <a href="#">Gallery</a>
                            <a href="#">Contact us</a>
                        </div>
                    </div>
                </nav>

                <header class="hero flex items-center">
                    <div class="container">
                        <div class="welcome flex items-center">
                            <span>Welcome to</span>
                            <img src="./icons/logo-2.svg" alt="">
                        </div>
                        <h1>The World Best <span>Shoping</span> Website</h1>
                        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
                            been the
                            industry's standard dummy.</p>
                        <div>
                            <button class="btn btn-primary">Read More</button>
                            <button class="btn btn-secondary">Shop Now</button>
                        </div>
                        <div class="hero-image">
                            <img src="./images/straw.png" alt="">
                        </div>
                    </div>
                </header>

                <section class="top-products">
                    <div class="container">
                        <h1 class="section-heading">Top products</h1>
                        <div class="slider">
                            <button class="slider-btn prev-btn"><img src="./icons/pre.svg" alt=""></button>
                            <button class="slider-btn next-btn"><img src="./icons/next.svg" alt=""></button>
                            <div class="food-slider">
                                <div class="food-card magic-shadow-sm">
                                    <div class="product-image flex items-center justify-center">
                                        <img src="./images/plate-1.png" alt="">
                                    </div>
                                    <hr>
                                    <div>
                                        <h2 class="text-center">Summer Salad</h2>
                                        <div class="stars flex justify-center items-center">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                        </div>
                                        <div class="price text-center">
                                            $ 1.25
                                        </div>
                                        <div class="flex justify-center">
                                            <button>
                                                <img src="./icons/cart-2.svg" alt="">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="food-card magic-shadow-sm">
                                    <div class="product-image flex items-center justify-center">
                                        <img src="./images/plate-2.png" alt="">
                                    </div>
                                    <hr>
                                    <div>
                                        <h2 class="text-center">Russian Salad</h2>
                                        <div class="stars flex justify-center items-center">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                        </div>
                                        <div class="price text-center">
                                            $ 1.25
                                        </div>
                                        <div class="flex justify-center">
                                            <button>
                                                <img src="./icons/cart-2.svg" alt="">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="food-card magic-shadow-sm">
                                    <div class="product-image flex items-center justify-center">
                                        <img src="./images/plate-3.png" alt="">
                                    </div>
                                    <hr>
                                    <div>
                                        <h2 class="text-center">Greek Salad</h2>
                                        <div class="stars flex justify-center items-center">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                        </div>
                                        <div class="price text-center">
                                            $ 1.25
                                        </div>
                                        <div class="flex justify-center">
                                            <button>
                                                <img src="./icons/cart-2.svg" alt="">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="food-card magic-shadow-sm">
                                    <div class="product-image flex items-center justify-center">
                                        <img src="./images/plate-3.png" alt="">
                                    </div>
                                    <hr>
                                    <div>
                                        <h2 class="text-center">Cottage pie</h2>
                                        <div class="stars flex justify-center items-center">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/start-filled.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                            <img src="./icons/star-grey.svg" alt="">
                                        </div>
                                        <div class="price text-center">
                                            $ 1.25
                                        </div>
                                        <div class="flex justify-center">
                                            <button>
                                                <img src="./icons/cart-2.svg" alt="">
                                                <span>Add to cart</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center btn-wrapper">
                            <button class="btn btn-secondary">View More</button>
                        </div>
                    </div>
                </section>
                <section class="about-meal">
                    <div class="container">
                        <h1 class="section-heading">About Fresh Meal</h1>
                        <div class="about-meal-wrap flex">
                            <div class="flex-1">
                                <img src="./images/yogurt.png" alt="">
                            </div>
                            <div class="flex-1">
                                <h2>Freshmeal is a long established fact that a reader will be distracted</h2>
                                <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a
                                    piece of
                                    classical Latin literature from 45 BC, making it over 2000 years old. Richard
                                    McClintock, a
                                    Latin professor at Hampden Sydney College in Virginia, The standard chunk of Lorem
                                    Ipsum used
                                    since the 1500s is reproduced below for those interested.</p>
                                <button class="btn btn-secondary">Read More</button>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="our-services">
                    <div class="container">
                        <h1 class="section-heading">Our services</h1>
                        <div class="card-wrapper flex">
                            <div class="service-card magic-shadow-sm">
                                <img class="icon" src="./icons/transport.svg" alt="">
                                <h2>Free Home delivery</h2>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                <button class="btn btn-secondary">Read More</button>
                            </div>
                            <div class="service-card magic-shadow-sm">
                                <img class="icon" src="./icons/bag.svg" alt="">
                                <h2 class="text-primary">30 Days ReturnServices</h2>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                <button class="btn btn-primary">Read More</button>
                            </div>
                            <div class="service-card magic-shadow-sm">
                                <img class="icon" src="./icons/usd.svg" alt="">
                                <h2>Money Back Guaranted</h2>
                                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                                <button class="btn btn-secondary">Read More</button>
                            </div>
                        </div>
                    </div>
                </section>
                <section class="big-deal">
                    <div class="container">
                        <h1 class="section-heading text-pure">Big Deals of the Week</h1>
                        <div class="timer">
                            <div>
                                <span>02</span>
                                <span>Days</span>
                            </div>
                            <div>
                                <span>24</span>
                                <span>Hours</span>
                            </div>
                            <div>
                                <span>55</span>
                                <span>Minutes</span>
                            </div>
                            <div>
                                <span>58</span>
                                <span>Seconds</span>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="latest-news">
                    <div class="container">
                        <h1 class="section-heading">Lastest News from Blog</h1>
                        <div class="article-wrapper">
                            <article class="card magic-shadow-sm">
                                <div>
                                    <img src="./images/coffee.jpg" alt="">
                                </div>
                                <div class="card-content">
                                    <div class="post-meta flex items-center justify-between">
                                        <span>July 03, 2017</span>
                                        <div>
                                            <span>Posted by <strong>FreshMeal</strong></span>
                                            <span class="comment-count">12 Comments</span>
                                        </div>
                                    </div>

                                    <h2>Lorem Ipsum is simply dummy text of the printing</h2>
                                    <p>It is a long established fact that a reader will be distracted by the readable
                                        content of a
                                        page when looking at its layout. The point of using Lorem Ipsum is that it has a
                                        more
                                        letters.</p>
                                </div>
                            </article>
                            <article class="card magic-shadow-sm">
                                <div>
                                    <img src="./images/donut.jpg" alt="">
                                </div>
                                <div class="card-content">
                                    <div class="post-meta flex items-center justify-between">
                                        <span>July 03, 2017</span>
                                        <div>
                                            <span>Posted by <strong>FreshMeal</strong></span>
                                            <span class="comment-count">12 Comments</span>
                                        </div>
                                    </div>

                                    <h2>Lorem Ipsum is simply dummy text of the printing</h2>
                                    <p>It is a long established fact that a reader will be distracted by the readable
                                        content of a
                                        page when looking at its layout. The point of using Lorem Ipsum is that it has a
                                        more
                                        letters.</p>
                                </div>
                            </article>
                        </div>
                        <div class="text-center btn-wrapper">
                            <button class="btn btn-secondary">View All</button>
                        </div>
                    </div>
                </section>

                <section class="subscribe">
                    <div class="container flex items-center">
                        <div>
                            <img src="./images/rasberry.png" alt="">
                        </div>
                        <div>
                            <h1>Subscribe to your newsletter</h1>
                            <p>Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many
                                web sites
                                still in their infancy.</p>
                            <div class="input-wrap">
                                <input type="email" placeholder="email@freshmeal.com">
                                <button>Subscribe</button>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="contact-us flex">
                    <div class="contact-info-wrapper">
                        <h1 class="section-heading">Contact us</h1>
                        <div class="contact-info">
                            <div>
                                <div>
                                    <img src="./icons/phone-2.svg" alt="">
                                    <div>
                                        <span>Call us:</span>
                                        <span>(+84) 123 456 789</span>
                                    </div>
                                </div>
                                <div>
                                    <img src="./icons/bag-2.svg" alt="">
                                    <div>
                                        <span>E-mail ::</span>
                                        <span>support@freshmeal.com</span>
                                    </div>
                                </div>
                                <div>
                                    <img src="./icons/clock-2.svg" alt="">
                                    <div>
                                        <span>Working Hours:</span>
                                        <span>Mon - Sat (8.00am - 12.00am)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="map">
                        <iframe
                            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d206253.45012861438!2d-115.31508258571672!3d36.124918453865035!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80beb782a4f57dd1%3A0x3accd5e6d5b379a3!2sLas%20Vegas%2C%20NV%2C%20USA!5e0!3m2!1sen!2sru!4v1580850940897!5m2!1sen!2sru"
                            width="100%" height="100%" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
                    </div>
                </section>

                <footer>
                    <div class="container">
                        <div class="box">
                            <h3>About us</h3>
                            <p>It was popularised in the 1960 with the release of Latest sheets containing Lorem Ipsum
                                passage.</p>
                            <button class="btn btn-secondary">Read More</button>
                        </div>
                        <div class="box">
                            <h3>Quik Links</h3>
                            <ul>
                                <li>
                                    <a href="#">Home</a>
                                </li>
                                <li>
                                    <a href="#">About us</a>
                                </li>
                                <li>
                                    <a href="#">Products</a>
                                </li>
                                <li>
                                    <a href="#">Blog</a>
                                </li>
                                <li>
                                    <a href="#">Services</a>
                                </li>
                                <li>
                                    <a href="#">Gallery</a>
                                </li>
                                <li>
                                    <a href="#">Contact us</a>
                                </li>

                            </ul>
                        </div>
                        <div class="box">
                            <h3>Follow Us</h3>
                            <div>
                                <ul>
                                    <li>
                                        <a href="https://www.facebook.com/codersgyan">
                                            <img src="./icons/facebook.svg" alt="">
                                            <span>Facebook</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://twitter.com/CoderGyan">
                                            <img src="./icons/twitter.svg" alt="">
                                            <span>Twitter</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <img src="./icons/google.svg" alt="">
                                            <span>Google +</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.instagram.com/codersgyan/">
                                            <img src="./icons/instagram.svg" alt="">
                                            <span>Instagram</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="box instagram-api">
                            <h3>Instagram</h3>
                            <div class="post-wrap">
                                <div>
                                    <img src="./images/food-table.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/food-table.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/food-table.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/food-table.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/food-table.jpg" alt="">
                                </div>
                                <div>
                                    <img src="./images/food-table.jpg" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
                </footer>
                <footer class="copyright">
                    <div>
                        Copyright © 2020 .All rights reserved by <a href="https://www.instagram.com/codersgyan/">Coder's Gyan</a>.
                    </div>
                </footer>
            </div>
        </div>
    </div>





    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="js/app.js"></script>
</body>

</html>